<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大学查询页</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:200,300,400,500,600,700,900">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <link href="css/zzsc.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css">

    <link href="css/maps.css" rel="stylesheet">
    <link rel="stylesheet" href="./assets/style.css">
    <script type="text/javascript" src="js/maps.js"></script>
    <script type="text/javascript" src="js/google.js"></script>

</head>
<body>
<style>
    a:hover{ text-decoration:underline;color: #FF5907; }
</style>



<div id="app">
    <ul   class="nav ">
        <li style="float: left;padding-left:320px " > <a style="font-size: 10px" href="#">会员权益</a></li>
        <li style="float: left;padding-left:10px " > <a style="font-size: 10px" href="#">文本比较</a></li>
        <li style="float: left;padding-left:10px " > <a style="font-size: 10px" href="#">在线代码</a></li>
        <li style="float: left;padding-left: 900px" ><a style="font-size: 10px" @click="location.href='./userUpdate.html'" >修改信息 </a>&nbsp;</li>
        <li style="float: left; padding-left: 10px" > <a style="font-size: 10px" href="#">| </a></li>
        <li style="float: left;padding-left: 10px" > <a style="font-size: 10px" @click="goOffline()">退出登录</a></li>



    </ul>
    <!-- 固定导航栏 -->
    <div class="container">
        <div class="row nav upnav">
            <div class="col-lg-4"><h1><div style="font-family: 'Arial';">志愿填报网</div></h1></div>
            <div class="col lg-4"></div>
        </div>
        <div class="content" >
            <p style="display:none">Lorem ipsum dolor dit amet</p>
            <p style="display:none">Lorem ipsum dolor dit amet</p>
            <ul class="venus-menu">
                <p style="display:none">Lorem ipsum dolor dit amet</p>
                <li  ><a href="#"><i class="icon-home"></i> <a href=index.html" style="font-weight: bold; color: rgb(57, 83, 131);">
                    首页
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                <p style="display:none">Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-search"></i><a href="#">
                    院校查找
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-android-hand"></i> <a href="majors.html">
                    模拟填报
                </a></a>
                    <p style="display:none">Lorem ipsum dolor dit amet</p>
                </li>
                <p style="display:none">Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-ios-star-half"></i><a href="recommend.html">
                    志愿推荐
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-podium"></i><a href="ranking.html">
                    大学排行
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-android-exit"></i><a href="http://localhost/" target="_blank" >
                    管理员入口
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                </li>

                <p style="display:none">Lorem ipsum dolor dit amet</p>
                </li>
            </ul>
            <p style="display:none">Lorem ipsum dolor dit amet</p>
            <p style="display:none">Lorem ipsum dolor dit amet</p>
        </div>
    </div>

    <div class="container tianjianchaxun">
        <div class="wapperA">
            <br>
            <br>
            <br><br>
            <div class="tagname">所在省份：</div>
            <div class="tagwapper">
                <div>
                    <label class="tagA">
                        <input type="radio" value="北京" name="region" v-model="region"/>北京
                    </label>
                    <label class="tagA">
                        <input type="radio" value="天津" name="region" v-model="region"/>天津
                    </label>
                    <label class="tagA">
                        <input type="radio" value="河北" name="region" v-model="region"/>河北
                    </label>
                    <label class="tagA">
                        <input type="radio" value="山西" name="region" v-model="region"/>山西
                    </label>
                    <label class="tagA">
                        <input type="radio" value="内蒙古" name="region" v-model="region"/>内蒙古
                    </label>
                    <label class="tagA">
                        <input type="radio" value="辽宁" name="region" v-model="region"/>辽宁
                    </label>
                    <label class="tagA">
                        <input type="radio" value="吉林" name="region" v-model="region"/>吉林
                    </label>
                </div>
                <div>
                    <label class="tagA">
                        <input type="radio" value="黑龙江" name="region" v-model="region"/>黑龙江
                    </label>
                    <label class="tagA">
                        <input type="radio" value="上海" name="region" v-model="region"/>上海
                    </label>
                    <label class="tagA">
                        <input type="radio" value="江苏" name="region" v-model="region"/>江苏
                    </label>
                    <label class="tagA">
                        <input type="radio" value="浙江" name="region" v-model="region"/>浙江
                    </label>
                    <label class="tagA">
                        <input type="radio" value="安徽" name="region" v-model="region"/>安徽
                    </label>
                    <label class="tagA">
                        <input type="radio" value="福建" name="region" v-model="region"/>福建
                    </label>
                    <label class="tagA">
                        <input type="radio" value="江西" name="region" v-model="region"/>江西
                    </label>
                </div>
                <div>
                    <label class="tagA">
                        <input type="radio" value="山东" name="region" v-model="region"/>山东
                    </label>
                    <label class="tagA">
                        <input type="radio" value="河南" name="region" v-model="region"/>河南
                    </label>
                    <label class="tagA">
                        <input type="radio" value="湖北" name="region" v-model="region"/>湖北
                    </label>
                    <label class="tagA">
                        <input type="radio" value="湖南" name="region" v-model="region"/>湖南
                    </label>
                    <label class="tagA">
                        <input type="radio" value="广东" name="region" v-model="region"/>广东
                    </label>
                    <label class="tagA">
                        <input type="radio" value="广西" name="region" v-model="region"/>广西
                    </label>
                    <label class="tagA">
                        <input type="radio" value="海南" name="region" v-model="region"/>海南
                    </label>
                </div>
                <div>
                    <label class="tagA">
                        <input type="radio" value="重庆" name="region" v-model="region"/>重庆
                    </label>
                    <label class="tagA">
                        <input type="radio" value="四川" name="region" v-model="region"/>四川
                    </label>
                    <label class="tagA">
                        <input type="radio" value="贵州" name="region" v-model="region"/>贵州
                    </label>
                    <label class="tagA">
                        <input type="radio" value="云南" name="region" v-model="region"/>云南
                    </label>
                    <label class="tagA">
                        <input type="radio" value="西藏" name="region" v-model="region"/>西藏
                    </label>
                    <label class="tagA">
                        <input type="radio" value="陕西" name="region" v-model="region"/>陕西
                    </label>
                    <label class="tagA">
                        <input type="radio" value="甘肃" name="region" v-model="region"/>甘肃
                    </label>
                </div>
                <div>
                    <label class="tagA">
                        <input type="radio" value="青海" name="region" v-model="region"/>青海
                    </label>
                    <label class="tagA">
                        <input type="radio" value="宁夏" name="region" v-model="region"/>宁夏
                    </label>
                    <label class="tagA">
                        <input type="radio" value="新疆" name="region" v-model="region"/>新疆
                    </label>
                    <label class="tagA">
                        <input type="radio" value="台湾" name="region" v-model="region"/>台湾
                    </label>
                    <label class="tagA">
                        <input type="radio" value="香港" name="region" v-model="region"/>香港
                    </label>
                    <label class="tagA">
                        <input type="radio" value="澳门" name="region" v-model="region"/>澳门
                    </label>
                </div>
            </div>
        </div>

        <div class="wapperB">
            <div class="label-text">院校类型：</div>&emsp;
            <label class="tagB"><input type="radio" value="综合" name="type" v-model="type"/>综合</label>
            <label class="tagB"><input type="radio" value="工科" name="type" v-model="type"/>工科</label>
            <label class="tagB"><input type="radio" value="理科" name="type" v-model="type"/>理科</label>
            <label class="tagB"><input type="radio" value="文科" name="type" v-model="type"/>文科</label>
            <label class="tagB"><input type="radio" value="政法" name="type" v-model="type"/>政法</label>
            <label class="tagB"><input type="radio" value="医药" name="type" v-model="type"/>医药</label>
            <label class="tagB"><input type="radio" value="体育" name="type" v-model="type"/>体育</label>
            <label class="tagB"><input type="radio" value="农林" name="type" v-model="type"/>农林</label>
            <label class="tagB"><input type="radio" value="林业" name="type" v-model="type"/>林业</label>
            <label class="tagB"><input type="radio" value="师范" name="type" v-model="type"/>师范</label>
            <label class="tagB"><input type="radio" value="语言" name="type" v-model="type"/>语言</label>
            <label class="tagB"><input type="radio" value="财经" name="type" v-model="type"/>财经</label>
            <label class="tagB"><input type="radio" value="艺术" name="type" v-model="type"/>艺术</label>
            <label class="tagB"><input type="radio" value="民族" name="type" v-model="type"/>民族</label>
        </div>
        <br>
        <a href="javascript:;" @click="findByTags" class="btn-primary tgbqcx">通过标签查询</a>
    </div>

    <div class="container">
        <div class="chaxunjieguo yxtuijian" style="margin-bottom: 10px">院校查询结果</div>
        <div style="font-size: 1.2em; margin-left: 30px">共查询到 <span style="color: #00acee"> {{this.totals}} </span> 所院校</div>
        <div class="row" style="background-color: white; padding-top: 30px; padding-bottom: 30px; border-radius: 15px">
            <div class="col-lg-12">
                <table class="table table-borderd">
                    <tbody class="table table-borderd table-condensed">
                    <tr v-for="college in colleges">
                        <td><img :src="'./img/'+college.logo" class="viewspotimg"></td>
                        <td>
                            <div class="tabletexts">
                                <span v-text="college.name" class="tableName"></span>
                                <span v-text="college.region" class="tableProvince"></span>
                            </div>
                            <div>
                                <span v-text="college.type" class="tableTag"></span>
                                <span v-text="college.level" class="tableTag"></span>
                            </div>
                        </td>
                        <td>
                            <span v-text="college.describes" class="tableTag"></span>                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="next">
                    <!--大于1的时候可以点, 等于1的时候点了没效果-->
                    <a href="javascript:;" v-if="page>1" class="page" @click="findAll(page-1)">&lt;上一页</a>
                    <a href="javascript:;" v-if="page==1" class="page">&lt;上一页</a>
                    <a href="javascript:;" v-for="indexpage in totalPage" v-text="indexpage" @click="findAll(indexpage)"
                       style="margin-right: 5px"></a>
                    <!--小于最后一页的时候可以点, 在最后一页的时候点了没效果-->
                    <a href="javascript:;" v-if="page==totalPage" class="page">下一页&gt;</a>
                    <a href="javascript:;" v-if="page<totalPage" class="page" @click="findAll(page+1)">下一页&gt;</a>
                </div>
            </div>

        </div>

    </div>

    <!-- footer -->
    <div class="footer container">
        <div class="footertext">
    <div>联系电话: 123456789</div>
<div>团队成员: 马秀坤 和理智 王贺 王乐斌 </div>
        </div>
    </div>
</div>
</body>
</html>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            colleges:[],
            page:1,
            rows:9,
            totalPage:0,
            totals:0,
            region:"",
            type:""
        },
        methods:{
            goOffline(){
                const storage = window.localStorage;
                storage.setItem("online","off");
                storage.setItem("userid",'');
                storage.setItem("role","user")
                alert("登出成功, 点击进入登陆页面")
                location.href='login.html';
            },
            findAll(indexpage){
                if(indexpage) this.page = indexpage;
                // if(this.type==="null") this.type=null;
                // if(this.region==="null") this.region=null;
                const _this = this;
                axios.get("http://localhost:8080/colleges/findByPage?page="+this.page+"&rows="+this.rows).then((res)=>{
                    console.log(res.data)
                    _this.colleges = res.data.colleges;
                    _this.totalPage = res.data.totalPage;
                    _this.totals = res.data.totals;
                });
            },
            findByTags(){
                const _this = this;
                console.log(this.type)
                console.log(this.region)
                console.log("page="+this.page+"&rows="+this.rows+"&type="+this.type+"&region="+this.region)
                axios.get("http://localhost:8080/colleges/findByPage?page="+this.page+"&rows="+this.rows+
                    "&type="+encodeURI(this.type)+"&region="+encodeURIComponent(this.region)).then((res)=>{
                    console.log(res.data)
                    console.log(location.href)
                    _this.colleges = res.data.colleges;
                    _this.totalPage = res.data.totalPage;
                    _this.totals = res.data.totals;
                });
            },
            toAdmin(){
                if(window.localStorage.getItem("role") === 'administrator') location.href='admin/user.html';
                else alert("非管理员 无授权进入管理员界面!")
            },
        },
        created(){
            if(0){
                window.location='login.html';
            }else {
                this.findAll();
            }
        }
    })
</script>